<template>
  <van-sticky>
    <van-nav-bar :title="pageInfo?.backBtn ? pageInfo?.title : ''">
      <template #left>
        <template v-if="pageInfo?.backBtn">
          <span @click="pageInfo?.backFunc" style="color: #218ee5"
            ><van-icon name="arrow-left" size="18" /> 返回</span
          >
        </template>
        <template v-else>
          <h3>
            {{ pageInfo?.title }}
          </h3>
        </template>
      </template>
      <template #right>
        <div class="operation">
          <van-button class="collect" icon="star-o" round type="default" v-if="!pageInfo?.backBtn">
            收藏
          </van-button>
          <div class="right-btn">
            <van-button class="more" icon="ellipsis" type="default" @click="router.push('/')">
            </van-button>
            <van-divider vertical :style="{ borderColor: 'gray' }" />
            <van-button class="close" icon="close" type="default" @click="router.push('/')">
            </van-button>
          </div>
        </div>
      </template>
    </van-nav-bar>
  </van-sticky>
</template>

<script setup lang="ts">
import router from '@/router'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

interface PageInfo {
  title: string
  backBtn: boolean
  backFunc?: () => void
}
const data: Record<string, PageInfo> = {
  home: {
    title: '运动步数',
    backBtn: false
  },
  message: {
    title: '消息',
    backBtn: true,
    backFunc: () => {
      router.push('/')
    }
  },
  shop: {
    title: '租币商城',
    backBtn: false
  }
}
const route = useRoute()
const pageInfo = ref<PageInfo>()

watch(route, (_oldValue, newValue) => {
  pageInfo.value = data[newValue.path.replace(/\//, '')]
})
</script>

<style scoped lang="less">
.operation {
  display: flex;
  align-items: center;

  .van-button {
    height: 30px;
    font-weight: 700px;
    color: #0e84db;
  }
  .collect {
    margin-right: 10px;
  }
  .right-btn {
    border: 1px solid #dcdee0;
    box-sizing: border-box;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    .more,
    .close {
      border: none;
      width: 30px;
    }
  }
}
</style>
